/**
 * (c) 2013 Rob Wu <rob@robwu.nl>
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@rightPanelWidth: 250px;
@resizerWidth: 8px;
@fileSizeWidth: 4rem;
@fileSpecificToolbarHeight: 2rem;
@topBarHeight: 2rem;
@footerHeight: 3rem;
@footerFontsize: 0.9rem;

* {
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    // Prevent overscrolling in Chrome. The content is expected to fit exactly,
    // and otherwise the scrollbars will appear in the child elements of <body>.
    overflow: hidden;
}
body {
    font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
    font-size: 100%;
}
#top-bar {
    @fileFilterWidth: 300px;
    @barPadding: 0.2rem;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: @topBarHeight;
    border-bottom: 2px solid #DDD;
    padding: @barPadding;
    position: relative;

    // On small screens the togglers may overflow to the next line.
    // Make sure that they are visible if the user interacts with the top bar.
    &:hover {
        z-index: 10;
    }

    #file-filter {
        vertical-align: middle;
        width: @fileFilterWidth;
        max-width: 100%;
        height: 1.4rem;
        border: 1px solid #AAA;
        padding: 3px;
        color: #444;
        &:focus {
            outline: none;
            border-color: rgb(77, 144, 254);
        }
        &.invalid {
            background-color: #FEE;
            & ~ label {
                // Require the user to fix the regex before using the checkboxes
                display: none;
            }
        }
    }
    label {
        vertical-align: middle;
        display: -webkit-inline-flex;
        display: inline-flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        // This weird play with negative margins is to make sure that there is some
        // visible padding when the labels overflow to the next line.
        margin: -0.1rem 0;
        padding: 0.1rem 3px;
        background: white;
        height: 1.8rem;
        // ^^^ = 2 * 0.1 (padding) + 0.8 (description) + 0.8 (checkbox/counter) = 1.8rem.

        &:hover {
            outline: 1px solid rgba(0, 0, 0, 0.2);
        }

        // The meaning of the checkbox, displayed above the checkbox.
        .filter-label-description {
            -webkit-flex: 0 0 100%;
            flex: 0 0 100%;
            order: 1;
            font-size: 0.7rem;
            height: 0.8rem;
        }

        // Below the label description, checkbox at the left,
        // file counter at the right (gcount is inserted by JS).
        input[data-filter-type],
        .gcount {
            -webkit-flex: 0 0 auto;
            flex: 0 0 auto;
            order: 2;
            margin: 0;
            font-size: 0.7rem;
            height: 0.8rem;
        }

        input[data-filter-type] {
        }

        .gcount {
            // Set a very small width so that the flex label does not get too wide.
            // It is not zero so that the counter always has some size.
            padding-left: 2px;
            width: 2px;
        }
    }
    #file-filter-feedback {
        -webkit-flex: 1;
        flex: 1;
    }
    & > a[href] {
        margin: 0 5px;
    }
    & > a:not([href]) {
        display: none;
    }
}

#advanced-open {
    display: none;
    height: -webkit-calc(100% - ((@topBarHeight + @footerHeight)));
    height: calc(100% - ((@topBarHeight + @footerHeight)));
    text-align: center;
    padding: 2rem 1rem 0;
    overflow: auto;

    &.visible {
        & ~ #right-panel, & ~ #left-panel {
            display: none;
        }
        display: block;
    }
    input {
        padding: 0.5rem;
    }
}
#advanced-open-form {
    input[type=url] {
        display: block;
        width: 90%;
        margin: 0.3rem 5%;
    }
}
.site-specific-form {
    display: inline-block;
    text-align: left;
    padding: 1rem;
    transition: opacity 0.2s;

    &.disabled-site:not(:hover):not(.focused-form) {
        opacity: 0.3;
        input:invalid {
            outline: none;
        }
    }

    .labeltext {
        display: inline-block;
        width: 16ch;
    }
    > div:hover {
        background-color: #F5F5F5;
    }
    label, input[type=text] {
        display: inline-block;
        padding: 0.5rem;
    }
    label {
        &:hover, &:active {
            background-color: #ddd;
        }
    }
    input[type=text] {
        // Fit at least the extension ID (32 chars) and browser version (max 24 chars)
        width: 64ch;
    }
    input:invalid {
        outline: auto red
    }
}
.amoxpilist {
    a {
        display: block;
        padding: 0.3em;
    }
}
#right-panel, #left-panel {
    height: -webkit-calc(100% - @topBarHeight);
    height: calc(100% - @topBarHeight);
}
#right-panel {
    padding-left: (2 * @resizerWidth + @rightPanelWidth);
}
#left-panel {
    z-index: 1;
    position: absolute;
    display: inline-block;
    width: @rightPanelWidth;
    background-color: #FFF;
    & > .content {
        overflow-y: auto;
        max-height: 100%;
    }
    & > .resizer {
        height: 100%;
        position: absolute;
        top: 0;
        right: -@resizerWidth;
        width: @resizerWidth;
        background-color: #DDD;
        cursor: col-resize;
        &:hover {
            background-color: #AAA;
        }
    }
}
footer {
    height: @footerHeight;
    border-top: 1px dotted #ccf;
    font-size: @footerFontsize;
    padding: (((@footerHeight - @footerFontsize) / 2)) 0;
    text-align: center;
}
#initial-status {
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: center;
    progress {
        width: 300px;
        max-width: 100%;
    }
}
.toggled {
    width: 0 !important;
    & > .content {
        display: none;
    }
}
.toggled + .toggleable {
    // Override inline declaration
    padding-left: (2 * @resizerWidth) !important;
}
.toggler {
    @triangleWidth: @resizerWidth;
    cursor: pointer;
    // Triangle:
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-left: 0;
    border-right: @triangleWidth solid rgba(0,0,0,0.5);
    &:hover {
        border-right-color: #000;
    }
    .toggled & {
        border-left: @triangleWidth solid black;
        border-right: 0;
    }
}
#file-list {
    margin: 0;
    padding: 0;
    list-style-type: none;

    &.gfilter-images    li.gtype-images,
    &.gfilter-code      li.gtype-code,
    &.gfilter-markup    li.gtype-markup,
    &.gfilter-locales   li.gtype-locales,
    &.gfilter-misc      li.gtype-misc,
    li.file-filtered, li.grep-no-match {
        display: none;
    }
    li.grep-unknown {
        opacity: 0.5;
    }
    li {
        position: relative;
        overflow-x: hidden;
        cursor: default;
        &:hover {
            background-color: rgba(99,99,99,0.2);
        }
        &.active {
            background-color: rgba(99,99,99,0.3);
        }
        &.file-selected {
            background-color: #def;
        }

        .file-path {
            position: absolute;
            min-width: 100%;
            box-sizing: border-box;
            padding-left: @fileSizeWidth;
            right: @fileSizeWidth;
            white-space: pre;

            .file-dir {
                color: #888;
                &:hover {
                    color: #000;
                }
            }
        }
        .file-size {
            width: @fileSizeWidth;
            float: right;
            text-align: right;
        }
    }
}

.total-size-wrapper {
    text-align: right;
}
#total-size {
    display: inline-block;
    width: @fileSizeWidth;
    border-top: 1px solid black;
}

#source-toolbar {
    height: @fileSpecificToolbarHeight;
    line-height: @fileSpecificToolbarHeight;
    position: relative;
}
#source-code {
    max-height: calc(100% - @fileSpecificToolbarHeight);
    overflow: auto;
    font-family: monospace;
    white-space: pre;
    -moz-tab-size: 2;
    tab-size: 2;

    .auto-wordwrap {
        white-space: pre-wrap;
        word-break: break-all;
    }
}

.file-specific-toolbar {
    > button {
        margin: 0 0.1rem;
    }
    .find-all-enabled {
        color: red;
        // Same style as .search-result-highlight in search-tools.less to help
        // users with getting familiar with the look of highlighted results.
        outline: 1px solid orange;
        background: rgba(255, 255, 100, 0.3);
    }
}
.file-specific-download-link {
    // Fixed-width font so that file-specific download links have a fixed width
    // ("Show download", "Creating link" and "Download file" have the same
    //  number of characters).
    font-family: monospace;
    &:not([href]) {
        cursor: pointer;
        border-bottom: 1px dotted;
        &:hover {
            border-bottom-style: solid;
        }
    }
}

.content-verifier-wrapper {
    display: inline-block;

    .content-verifier-output {
        // positioned relative to the toolbar.
        position: absolute;
        left: 0;
        // Allow some space for the source container scrollbar to be visible, if any.
        right: 30px;
        max-height: calc(100vh - ((@topBarHeight + @fileSpecificToolbarHeight)));
        overflow: auto;

        background: white;
        padding: 1rem;
        border: 1px solid #ccf;

        line-height: 1.5rem;

        // Above search highlights.
        z-index: 1;
    }
}

.info-table-row > :first-child {
    font-weight: bold;
    white-space: pre;
}

img:hover {
    // Subtle box around image to see the size of images that are
    // almost fully transparent or white.
    outline: 1px solid rgba(200, 200, 200, 0.5);
}

@import (less) "search-tools.less";
